<!--
Cette page contient le header de notre site web
-->
<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Chasse au trésor</title>
        <meta charset="utf-8" />
        <!--CSSS pour Internet Explorer-->
        <!--[if lte IE 9]>
            <h2>Veuillez changer de navigateurs, l'application de parcours de chasse au trésor fonctionne avec la technologie HTML 5</h2>
        <![endif]-->
        <!--[if !IE]-->
        <!--on insère le css-->
        <link rel="stylesheet" href="CSS/layout.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="CSS/design.css">
        <link rel="stylesheet" href="CSS/upload.css">
        <link rel="stylesheet" type="text/css" href="CSS/jquery-ui-1.8.20.custom.css"/>

        <!--on insère les librairies jquery-->
        <script src="JS/jquery-1.5.2.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="JS/jquery-ui-1.8.20.custom.min.js"></script>

        <!--on insère les elements de l'Api google map-->
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>      
        <script type="text/javascript" src="lib/gmap3.min.js"></script>
        <script type="text/javascript" src="lib/gmap3.js"></script>
        <script type="text/javascript" src="lib/geoxml3.js"></script>

        <!--MODULE D'UPLOAD-->
        <script type="text/javascript">
            
            $(document).ready(function() {	

                //select all the a tag with name equal to modal
                $('a[name=modal]').click(function(e) {
                    //Cancel the link behavior
                    e.preventDefault();
                    
                    //Requete ajax permettant de recuperer les points de la base de données
                    $.ajax({
                        type: 'POST',
                        url: 'gestionSite.php',
                        data:"action=listeSite",
                        dataType:'json',
                        success: function(data, textStatus, jqXHR) {
                            $.each(data, function(key, val) {
                                //Ajout des points à la liste
                                $('#lienSite').append("<li class='infoSite' id="+val.idSite+"><a href='index.php?adresse=" +val.nomSite+ "&id=" +val.idSite+ "&lat=" +val.latitude+ "&long=" +val.longitude+ "'>" +val.nomSite+ "</a></li>");    
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                        }
                    });   
	
                    //Get the screen height and width
                    var maskHeight = $(document).height();
                    var maskWidth = $(window).width();
	
                    //Set heigth and width to mask to fill up the whole screen
                    $('#mask').css({'width':maskWidth,'height':maskHeight});
		
                    //transition effect		
                    $('#mask').fadeIn(1000);	
                    $('#mask').fadeTo("slow",0.8);	
	
                    //Get the window height and width
                    var winH = $(window).height();
                    var winW = $(window).width();
              
                    //Set the popup window to center
                    $('#dialog').css('top',  winH/2-$('#dialog').height()/2);
                    $('#dialog').css('left', winW/2-$('#dialog').width()/2);
	
                    //transition effect
                    $('#dialog').fadeIn(2000); 
	
                });
	
                //if close button is clicked
                $('.window .close').click(function (e) {
                    //Cancel the link behavior
                    e.preventDefault();
                    
                    $('#mask').hide();
                    $('.window').hide();
                    $('li').remove('.infoSite');
                });
                
//                $('#mask').click(function () {
//                    $('#mask').hide();
//                    $('.window').hide();
//                    $('li').remove('.infoSite');
//                });

                $(window).resize(function () {
	 
                    var box = $('#boxes .window');
 
                    //Get the screen height and width
                    var maskHeight = $(document).height();
                    var maskWidth = $(window).width();
      
                    //Set height and width to mask to fill up the whole screen
                    $('#mask').css({'width':maskWidth,'height':maskHeight});
               
                    //Get the window height and width
                    var winH = $(window).height();
                    var winW = $(window).width();

                    //Set the popup window to center
                    box.css('top',  winH/2 - box.height()/2);
                    box.css('left', winW/2 - box.width()/2);
	 
                });
            });
        </script>


        <!--    </head>

            <body>

                <header >
                    <h1 >Edition de parcours de chasse au trésor</h1>
                    menu
                    <nav>
                        <ul id="menu">
                            <li> <a href="#">Categories</a>
                                <ul>
                                    <li><a href="#">CSS</a></li>
                                    <li><a href="#">Graphic design</a></li>
                                    <li><a href="#">Development tools</a></li>
                                    <li><a href="#">Web design</a></li>
                                </ul></li>
                            <li><a href="#dialog" name="modal">Modification de site</a></li>
                            <li><a href="creationSite.php">Création de site</a></li>
                            <li><a href="users.php">Gestion des utilisateurs</a></li>
                        </ul>
                    </nav>
                </header>

                <div id="boxes">

                    <div id="dialog" class="window">
                        <a href="#" class="close">Fermer</a>
                        <p>Choisissez un site</p>
                        <h2>Liste des sites</h2>
                        <ul id="list"></ul>
                        <a href="creationSite.php" id="nouveauSite"><input type="button" value="Créer un nouveau site"/></a>
                    </div>

                     Masque pour masquer l'ensemble de l'écran
                    <div id="mask"></div>

                </div>-->
